<template>
	<view class="content">
		<view class="album">
			<view class="album__avatar">
				<up-avatar v-if="item.userid[0].avatar_file" :src="item.userid[0].avatar_file.url" shape="square"></up-avatar>
				<up-avatar v-else src="'../../static/noPic.png'" shape="square" mp-avatar></up-avatar>
			</view>
			<view class="album__content">
				<up-text :text="item.userid[0].nickname" type="primary" bold size="17"></up-text>
				<up-text margin="0 0 8px 0" :text="item.content"></up-text>
				<view class="up-album">
					<hxe-image-video v-for="(items, index) in item.imageValue" :key="index" :src="items.url"
						@click="imgPreview(index,item)"></hxe-image-video>
				</view>
			</view>
			<view class="artTime">
				<text>{{getTimeDiff(item.posttime)}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getTimeDiff
	} from '@/utils/commen.js';
	import {
		ref,
		defineProps
	} from 'vue';
	defineProps({
		item: {
			type: Object,
			default: {}
		}
	})

	//  图片预览
	const imgPreview = (index, list) => {
		const urlList = []
		list.imageValue.forEach(item => {
			if (checkFile(item.url, 'image')) {
				urlList.push(item.url)
			}
		})
		uni.previewImage({
			current: index,
			loop: true,
			urls: urlList
		})
	}
	// 图片验证
	const checkFile = (fileValue, type) => {
		var index = fileValue.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
		var fileValueSuffix = fileValue.substring(index); //截断"."之前的，得到后缀
		if (type == 'video') {
			if (!/(.*)\.(mp4|rmvb|avi|ts)$/.test(fileValueSuffix)) { //根据后缀，判断是否符合视频格式
				return false;
			}
		}
		if (type == 'image') {
			if (!/(.*)\.(gif|jpg|jpeg|png|GIF|JPG|PNG|image)$/.test(fileValueSuffix)) { //根据后缀，判断是否符合图片格式
				return false;
			}
		}
		return true;
	}
</script>

<style scoped lang="scss">
	.content {
		margin-top: 20rpx;

		.album {
			@include flex;
			align-items: flex-start;

			&__avatar {
				background-color: $u-bg-color;
				padding: 5px;
				border-radius: 3px;
			}

			&__content {
				margin-left: 10px;
				flex: 1;
			}

			.up-album {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 25rpx 0;

			}

			.artTime {
				text {
					font-size: 30rpx;
					color: #cdcdcd;
				}
			}
		}
	}
</style>